<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-09-01
 * @FilePath: /element-admin/src/views/GitUsers.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="MemberPointHisDrawer-page">
    <!-- bodyer -->
    <div class="drawer-bodyer">
      <el-row class="row fstRow clearfix">
        <!--顶部搜索栏-->
        <div class="col-md-12">
          <el-row :gutter="20">
            <el-col :span="22" :offset="1" class="clearfix">
              <el-form :inline="true" :model="query" class="demo-form-inline">
                <el-form-item label="分类名称">
                  <el-input v-model="query.key" placeholder="分类 & 名称" size="small" :clearable="true"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleFetch" class="register_btn" size="small">查询</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button @click="childMethod()" size="small">关闭</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <!--中部数据表格栏-->
        <div class="col-md-12">
          <el-row :gutter="20">
            <el-col :span="22" :offset="1" class="clearfix">
              <el-table :data="pointHisList"
                        :cell-style="{padding:'3px'}"
                        :row-style="{height:'30px'}"
                        :height="tableHeight" :key="isIndex" style="width: 100%" v-loading="isLoading" border stripe
                        row-key="id">
                <el-table-column v-if="isIndex == 1" type="index" label="序号" width="75"></el-table-column>
                <el-table-column prop="member_id" label="会员ID" v-if="false"></el-table-column>
                <el-table-column prop="create_date" label="变更时间"></el-table-column>
                <el-table-column prop="waystr" label="积分变更途径"></el-table-column>
                <el-table-column prop="points" label="积分"></el-table-column>
                <el-table-column prop="memo" label="说明"></el-table-column>
              </el-table>
            </el-col>
            <el-col :span="22" :offset="1" class="custRow clearfix">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :pager-count=5
                  :page-sizes="[20, 50, 100]"
                  :page-size="query.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :page-count=10
                  :total="query.total">
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </el-row>
    </div>

  </div>
</template>
<script>
import {fetch} from "@/api/MemberPointHistory";
import {Loading} from "element-ui";


export default {
  name: "MemberPointHisInfo",
  components: {},
  data() {
    return {
      isIndex: 1,
      isLoading: true,
      currentPage: 1,
      total: 0,
      query: {
        key: '',
        member_id: '',
        pageSize: 20,
        pageNum: 1,
      },
      tableHeight: 650,
      pointHisList: [],
    }
  },
  props: {
    drawId: {type: String, default: ''}
  },
  computed: {},
  methods: {
    handleFetch() {
      this.isLoading = true;
      fetch(this.query).then(res => {
        let _res = eval(res.data);
        // 刷新页面表格
        this.pointHisList = _res.lists;
        this.query.pageSize = _res.pageSize;
        this.query.total = _res.total;
        this.isLoading = false;
      }).catch(err => {
        this.isLoading = false;
        this.$message.error('错了哦，这是一条错误消息' + err);
      });
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.handleFetch(this.query);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.query.pageNum = currentPage;
      this.handleFetch(this.query);
    },
    childMethod() {
      this.pointHisList = [];
      this.$emit('fMethod');
    },
  },
  created() {
    let options = {fullscreen: true}
    this.loadingInstance = Loading.service(options);
    this.loadingInstance.close();
  },
  mounted() {
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        if (drawId.length > 0) {
          this.initFlg = false;
          this.query.member_id = drawId;
          this.handleFetch(drawId);
        }
      }
    }
  }
}
</script>
<style scoped>
.fstRow {
  margin-top: 0px;
  display: flex;
  padding: 5px 5px 5px 5px;
}
.custRow {
  display: flex;
  margin-top: 5px;
  padding: 5px 5px 5px 5px;
}
</style>